<html>
<head> 
{% load staticfiles %}
<link rel="stylesheet" href="{% static "css/base.css" %}" type="text/css" media="screen" />

<!-- All styling starts here. -->
<style type="text/css">

.ul li{
list-style-type:none;
text-align: top;
}

.alignment{
position:absolute;
margin-top:-5em;
margin-left:20em;
}

.thetable{
margin-left:4em;
margin-right:11em;
margin-top:3em;
margin-bottom: 5em;
height:500px; 
width:1200px; 
box-shadow:0px 30px 300px 50px black;
font-family: system, sans-serif;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}

td{
padding:15px;
}
</style>
<!-- All styling ends here. -->

<!-- All scripts start here. -->
<script type="text/javascript">
function startTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
// add a zero in front of numbers<10
m=checkTime(m);
s=checkTime(s);
document.getElementById('clock').innerHTML=h+":"+m+":"+s;
t=setTimeout(function(){startTime()},500);
}

function checkTime(i)
{
if (i<10)
  {
  i="0" + i;
  }
return i;
}
</script>

<script type="text/javascript">
	function logout(){
		window.location = "/logout/";
	}

	function viewblog(){
	window.location = "/blogit/viewblog/";
	}	
	
	function newblog(){
	window.location = "/newblog/"
	}
</script>

<!-- All scripts end here. -->
</head>

<body>	
	<table class="thetable">
	{% csrf_token %}
	<tr>
		<td colspan="3">
		Welcome, {{username}}<img src="{% static "images/settings.gif"%}">	
		<div style="float:right;"><button type="button" onclick="logout()">Logout</button></div>	
		</td>
	</tr>
	<tr style="height:500px;">
	<div>		
		<td style="width:50px;">
		<div align="top">
			<ul class="ul">
				<li><button onclick="viewblog()" style="a:hover {background-color:#ff3300;}">View blogs</button></li>
				<li><button onclick="newblog()">New blog</button></li>
			</ul>
		</div>
		</td>
		
		<td style="width:500px; border:1px solid black;">
		{% for a in blogs %}
				<a href="/viewblog/content/?blogname={{a}}">{{a}}</a>
				<a href="/editblog/?blogname={{a}}"><img src="{% static "images/Edit_icon.png"%}"></a>
				<a href="/deleteblog/?blogname={{a}}"><img src="{% static "images/trash.gif"%}"></a><br>
			{%	endfor	%}		
		</td>
		<td style="width:70px;">Archives</td>		
	</tr>
	<tr>
		<td colspan="3"><div style="text-align:right"><i>Powered by Django</i></div></td>
	</tr>
	</table>
</body>
</html>
